<template>
	<div class="popupPanel">
		<div class="title">
			<span>点位信息</span>
			<el-button
				type="primary"
				style="padding:1px"
				icon="el-icon-close"
				circle
				@click="$emit('hidePopup')"
			></el-button>
		</div>
		<div class="item">
			<div class="name">名称:</div>
			<div class="value">{{info.pointName}}</div>
		</div>
		<div class="item">
			<div class="name">位置:</div>
			<div class="value">{{lonlat(info)}}</div>
		</div>
		<div class="ft">
			<el-button
				type="primary"
				size="mini"
				@click="$emit('edit')"
			>编辑</el-button>
			<el-button
        v-if="info.isValid"
				type="primary"
				size="mini"
				@click="$emit('disable')"
			>禁用</el-button>

      <el-button
        v-if="!info.isValid"
        type="primary"
        size="mini"
        @click="$emit('enable')"
      >启用</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: "popupPanel",
		components: {},
		props: {
			info: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {};
		},
		watch: {},
		computed: {},
		methods: {
      lonlat(item){
        return (item.lon>0?"E":"W")+item.lon.toFixed(6)+"°,"+(item.lat>0?"N":"S")+item.lat.toFixed(6)+"°";
      }
    },
		created() {},
		mounted() {}
	};
</script>
<style lang="scss" scoped>
	.popupPanel {
		position: relative;
		z-index: 1;
		background-color: #fff;
		border-radius: 4px;
		width: 280px;
		line-height: 20px;
		font-size: 12px;
		padding: 10px;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #1890ff;
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.item {
			display: flex;
			color: #323232;
			.name {
				min-width: 40px;
				font-weight: bold;
				color: #333;
			}
		}
		.ft {
			margin-top: 10px;
			text-align: right;
		}
	}
</style>
